<template>
  <div id="ProductIndex" v-cloak>

    <!-- 上架/下架 确认对话框 -->
    <el-dialog
      title="提示"
      :visible.sync="shiftStateConfirm"
      width="30%"
    >
      <span>确认{{shiftStateTip}}？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="shiftStateConfirm = false">取 消</el-button>
        <el-button type="primary" @click="shiftStateOk">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="提示"
      :visible.sync="deleteProductConfirm"
      width="30%"
    >
      <span>确认删除商品？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteProductConfirm = false; deleteBtnLoading = false">取 消</el-button>
        <el-button type="primary" @click="deleteProductOk" :loading="deleteBtnLoading">确 定</el-button>
      </span>
    </el-dialog>

    <main-header :title="'商品管理'" showAddProductBtn="true" :crumbsArr="crumbsArr" />
    <div class="product_index_main">
      <el-tabs
        type="border-card"
        @tab-click="clickTab">
        <!-- 货架上的商品 -->
        <el-tab-pane
          label="货架上的商品"
          v-loading="tableLoadingOnLine"
          element-loading-text="加载中"
          element-loading-background="rgba(255, 255, 255, 0.8)"
        >
          <product-table
            :tableData="productsOfOnLine"
            :state="1"
            @editProduct="editProduct"
            @shiftState="shiftState"
          />
          <el-pagination
            layout="prev, pager, next"
            :page-count="OnLinePageInfo.pageCount"
            :page-size="OnLinePageInfo.pageSize"
            :current-page="OnLinePageInfo.currentPage"
            @current-change="paginationChange($event, 'productsOfOnLine', 'tableLoadingOnLine', 'OnLinePageInfo', 1)">
          </el-pagination>
        </el-tab-pane>

        <!-- 仓库中的商品 -->
        <el-tab-pane
          label="仓库中的商品"
          v-loading="tableLoadingStorage"
          element-loading-text="加载中"
          element-loading-background="rgba(255, 255, 255, 0.8)"
        >
          <product-table
            :tableData="productsOfStorage"
            :state="0"
            @editProduct="editProduct"
            @shiftState="shiftState"
            @deleteProduct="deleteProduct"
          />
          <el-pagination
            layout="prev, pager, next"
            :page-count="StoragePageInfo.pageCount"
            :page-size="StoragePageInfo.pageSize"
            :current-page="StoragePageInfo.currentPage"
            @current-change="paginationChange($event, 'productsOfStorage', 'tableLoadingStorage', 'StoragePageInfo', 0)">>
          </el-pagination>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import MainHeader from '@/components/layouts/MainHeader'
import ProductTable from '@/components/pages/product/ProductListTable'
import API from '@/config/api.js'
import ErrorConfig from '@/config/error.config.js'

export default {
  name: 'ProductIndex',
  data () {
    return {
      crumbsArr: [ // 面包屑
        { name: 'welcome', txt: '首页' }, { txt: '商品管理' }
      ],
      OnLinePageInfo: { // 线上商品数据页信息
        pageCount: 1,
        pageSize: 0,
        currentPage: 1
      },
      StoragePageInfo: { // 仓库商品数据页信息
        pageCount: 1,
        pageSize: 0,
        currentPage: 1
      },
      productsOfOnLine: null,
      productsOfStorage: null,
      tableLoadingOnLine: false,
      tableLoadingStorage: false,
      shiftStateConfirm: false,
      deleteProductConfirm: false,
      deleteItemId: null,
      shiftItemInfo: null,
      shiftStateTip: '', // 切换状态弹出框提示语
      deleteBtnLoading: false
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => vm.loadProductData('productsOfOnLine', 'tableLoadingOnLine', 'OnLinePageInfo', 1))
  },
  watch: {
    // '$route' (to, from) {
    //   if (to.name === 'product') {
    //     this.loadProductData('productsOfOnLine', 'tableLoadingOnLine', 'OnLinePageInfo', 1)
    //   }
    // }
  },
  methods: {
    async loadProductData (tableDataName, loadingName, pageInfoName, state, page = 1) { // 加载table数据
      this[loadingName] = true
      const response = await API.getProductList({
        page,
        state
      })
      this[loadingName] = false
      const { code } = response
      if (code === 1) {
        const data = response.data
        this[pageInfoName].pageCount = data.pageCount
        this[pageInfoName].pageSize = data.pageSize
        this[pageInfoName].currentPage = data.pageIndex
        this[tableDataName] = data.rows
      } else {
        if (code === -1) {
          const { msg } = response
          this.$message.error(msg)
        } else {
          this.$message.error(ErrorConfig[code])
        }
      }
    },
    clickTab (event) { // 点击标签页
      switch (event.index) {
        case '0':
          // if (!this.productsOfOnLine) {
          this.loadProductData('productsOfOnLine', 'tableLoadingOnLine', 'OnLinePageInfo', 1)
          // }
          break
        case '1':
          // if (!this.productsOfStorage) {
          this.loadProductData('productsOfStorage', 'tableLoadingStorage', 'StoragePageInfo', 0)
          // }
          break
      }
    },
    paginationChange (currentPageNum, tableDataName, loadingName, pageInfoName, state) {
      this.loadProductData(tableDataName, loadingName, pageInfoName, state, currentPageNum)
    },
    async editProduct (id, state) { // 编辑商品
      // if (state === 1) {
      //   this.tableLoadingOnLine = true
      // } else {
      //   this.tableLoadingStorage = true
      // }
      this.$router.push({
        name: 'product_edit',
        params: {
          isEdit: true,
          editItemId: id
        }
      })
    },
    shiftState (id, state) {
      this.shiftItemInfo = {
        id,
        state
      }
      if (state === 0) { // 上架
        this.shiftStateTip = '上架'
      }
      if (state === 1) { // 下架
        this.shiftStateTip = '下架'
      }
      this.shiftStateConfirm = true
    },
    deleteProduct (id) { // 删除按钮点击
      this.deleteItemId = id
      this.deleteProductConfirm = true
    },
    async deleteProductOk () {
      this.deleteBtnLoading = true
      const response = await API.deleteProduct({ id: this.deleteItemId })
      const { code } = response
      if (code === 1) {
        this.$message({
          type: 'success',
          message: '删除成功'
        })
        this.loadProductData('productsOfStorage', 'tableLoadingStorage', 'StoragePageInfo', 0, this.StoragePageInfo.currentPage)
      } else {
        if (code === -1) {
          const { msg } = response
          this.$message.error(msg)
        } else {
          this.$message.error(ErrorConfig[code])
        }
      }
      this.deleteProductConfirm = false
      this.deleteBtnLoading = false
    },
    async shiftStateOk () { // 确认切换上架下架状态
      this.shiftStateConfirm = false
      if (this.shiftItemInfo.state === 0) { // 上架
        this.tableLoadingOnLine = true
        const response = await API.takeUpProduct({ id: this.shiftItemInfo.id })
        this.tableLoadingStorage = false
        if (response.code === 1) {
          this.$message({
            message: '上架成功',
            type: 'success'
          })
          this.loadProductData('productsOfStorage', 'tableLoadingStorage', 'StoragePageInfo', 0)
        } else {
          this.$message.error(ErrorConfig[response.code])
        }
      } else { // 下架
        this.tableLoadingOnLine = true
        const response = await API.takeOffProduct({ id: this.shiftItemInfo.id })
        this.tableLoadingOnLine = false
        const { code } = response
        if (code === 1) {
          this.$message({
            message: '下架成功',
            type: 'success'
          })
          this.loadProductData('productsOfOnLine', 'tableLoadingOnLine', 'OnLinePageInfo', 1)
          // this.loadProductData('productsOfStorage', 'tableLoadingStorage', 'StoragePageInfo', 0)
        } else {
          if (code === -1) {
            const { msg } = response
            this.$message.error(msg)
          } else {
            this.$message.error(ErrorConfig[code])
          }
        }
      }
    }
  },
  components: {
    MainHeader,
    ProductTable
  }
}
</script>

<style scoped lang="scss">
.product_index_main {
  padding: 20px 20px 0;
  .el-pagination {
    margin-top: 20px;
    text-align: center;
  }
}
</style>
